<template>
	<view>
		<!-- 购买须知的弹框 -->
		<uni-popup type="center" ref="noticePopup" :maskClick="isbtn">
			<view class="content-box tp-bgf tp-br12 tp-pb30">
				<uni-icons @click="close" class="close-icon addres" type="close" color="#999" size="30"> </uni-icons>
				<view class="center_combo tp-h88 tp-fz32 tp-fw600">
					{{noticeInfo.textTitle || ''}}
				</view>
				<scroll-view @scrolltolower="onBottom" scroll-y="true" class="scroll-Y" >
					<view  ref="jyfParserBox" id="jyf-parser-box" class="tp-pd30 jyf-parser-box">
						<jyf-parser :html="noticeInfo.context" ref="article"></jyf-parser>
					</view>
				</scroll-view>
				<view class="" v-if="!isbtn">
					<!-- <view class="btn" v-if="countdownShow" style="background: #E5E5E5;" @click="handleAwait">同意 <text>{{second}}</text></view> -->
					<view class="btn" v-if="countdownShow" style="background: #E5E5E5;" @click="handleAwait">同意</view>
					<view class="btn" v-else @click="handleOk">同意</text></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
	export default {
		components: {
			jyfParser
		},
		props: {
			//  富文本内容
			noticeInfo: {
				type: Object
			},
			isbtn: {
				type: Boolean
			}
		},
		data() {
			return {
				second: 2, // 倒计时
				int: '', // 倒计时变量
				countdownShow: true, // 倒计时显示
			};
		},
		methods: {
			show() {
				this.$refs.noticePopup.open()
				console.log(this.isbtn);
				// if (!this.isbtn) {
					// this.countdown()
				// }
				if (!this.isbtn) {
					setTimeout(() => {
						let view = uni.createSelectorQuery().in(this).select("#jyf-parser-box")
						view.fields({
							size: true
						}, data => {
							// console.log('data', data);
							uni.createSelectorQuery().in(this).select(".scroll-Y").boundingClientRect(res => { //最外层盒子的节点：类或者id
										// console.log('距离', res);
										if(data.height - res.height < 0) {
											this.countdownShow = false
										}
									}).exec()
						}).exec();
					}, 1000)
				}
			},
			close() {
				this.$refs.noticePopup.close()
				this.$emit('close')
				clearInterval(this.int)
			},
			// 确认按钮
			handleOk() {
				this.$emit('NoticeOk')
				this.close()
			},
			// 倒计时没结束
			handleAwait() {
				uni.showToast({
					title: '请仔细阅读内容',
					icon: 'none'
				})
			},
			// 倒计时
			countdown() {
				let _this = this
				_this.countdownShow = true
				this.int = setInterval(function() {
					_this.second--
					// console.log(_this.second)
					if (_this.second <= 0) {
						clearInterval(_this.int) // 清除计时器
						_this.second = 5
						_this.countdownShow = false
						return
					}
				}, 1000)
			},
			// 滚动到底部
			onBottom() {
				console.log('到底部');
				this.countdownShow = false
			}
		}
	}
</script>

<style lang="scss">
	.content-box {
		width: 690rpx;
		height: 80vh;
		position: relative;
	}
	.scroll-Y {
		height: calc(80vh - 88rpx - 88rpx - 30rpx) ;
		overflow-y: auto;
	}

	.addres {
		position: absolute;
		top: 10rpx;
		right: 20rpx;
	}

	.btn {
		width: 600rpx;
		margin: 0 auto;
		height: 88rpx;
		line-height: 88rpx;
		background: $blue;
		border-radius: 8rpx;
		font-size: 32rpx;
		color: #fff;
		text-align: center;
		margin-top: 30rpx;
	}

	
</style>
